<template>
	<view class="couponCenter">
		<view class="couponsList" v-if="couponList.length!=0&&!isNewShow">
			<view class="couponItem" v-for="(item,index) in couponList" :key="index"
				:style="{ backgroundImage: 'url(' + line_bg + ')' }" @click="toDetails(item)">
				<view class="couponName">
					<view>{{ item.activityName || '活动' }}</view>
					<view v-show="item.cardLists&&item.cardLists.length != 0">
						<view v-for='(item1,index1) in item.cardLists' :key="index1" v-if='index1<3'>
							{{ item1.cardName }} * {{ item1.cardCount }}
						</view>
					</view>
					<view v-show="item.couponLists&&item.couponLists.length != 0">
						<view v-for='(item1,index1) in item.couponLists' :key="index1" v-if='index1<3'>
							{{item1.couponsSillStr}}{{ item1.couponName }}*{{ item1.couponCount }}
						</view>
					</view>
					<view v-show="item.equityLists&&item.equityLists.length != 0">
						<view v-for='(item1,index1) in item.equityLists' :key="index1" v-if='index1<3'>
							{{ item1.equityName }} * {{ item1.equityCount }}
						</view>
					</view>
				</view>
				<view class="lingqu">
					<view>领取</view>
				</view>
			</view>
		</view>
		<view v-if="couponList.length==0&&!isNewShow">
			<upgrading text1="暂无活动~"></upgrading>
		</view>
		<view style="width: 100%;height: 150rpx;" v-if="!isNewShow"></view>
		<view class="bottom_button" v-if="!isNewShow">
			<view v-if="isLogin" class="button" :style="{backgroundColor: objColor2.btnColor || defaultColor}" @tap="toScan">券码兑换</view>
			<view v-else class="button" :style="{backgroundColor: objColor2.btnColor || defaultColor}" @tap="toLogin">登录后券码兑换</view>
		</view>
		<u-popup :show="isNewShow" :zIndex='10080' mode='bottom' custom-style="background: transparent;">
			<view class="popup-red" :style="{backgroundImage:'url('+popup_bg+')'}">
				<view style="display:flex;">
					<image class="img1" :src="popup_title"></image>
				</view>
				<image class="img2" :src="popup_cancel" @click="popClose"></image>
				<view class="ticketList" v-if="popList.cardLists&&popList.cardLists.length != 0">
					<view class="ticketItem" v-if="index<2" v-for="(item, index) in popList.cardLists" :key="index"
						:style="{ backgroundImage: 'url(' + ticket_bg + ')' }">
						<view class="left">
							<view>{{item.cardSillStr}}</view>
							<view>{{ item.applyStationType === 1?'所有站点':item.applyStationType === 2?'指定站点':'指定条件' }}
							</view>
							<view>{{ item.usableStatus === 1?'全天可用':'指定时段' }}</view>
						</view>
						<view class="right">
							<view style="font-size: 34rpx; font-weight: 500">{{ item.cardName }}
							</view>
							<view style="font-size: 26rpx" v-if="item.useSillQuota">满{{ item.useSillQuota }}可用</view>
							<view style="font-size: 26rpx" v-if="!item.useSillQuota">不限</view>
							<view>
								<view>
									<view>始</view>
									<text v-if="item.restrictStatus == '1' || item.usableStatus == '1'">{{ item.useStartTime }}</text>
									<text v-else>{{ item.fixedStartTime }}</text>
								</view>
								<view>
									<view>止</view>
									<text v-if="item.restrictStatus == '1' || item.usableStatus == '1'">{{ item.useEndTime }}</text>
									<text v-else>{{ item.fixedEndTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ticketList" v-if="popList.couponLists&&popList.couponLists.length != 0">
					<view class="ticketItem" v-if="index<2" v-for="(item, index) in popList.couponLists" :key="index"
						:style="{ backgroundImage: 'url(' + ticket_bg + ')' }">
						<view class="left">
							<view>￥{{ parseInt(item.couponsSillStr)}}</view>
							<view>{{ item.applyStationType === 1?'所有站点':item.applyStationType === 2?'指定站点':'指定条件' }}
							</view>
							<view>{{ item.usableStatus === 1?'全天可用':'指定时段' }}</view>
						</view>
						<view class="right">
							<view style="font-size: 34rpx; font-weight: 500">{{ item.couponName }}
							</view>
							<view style="font-size: 26rpx">
								{{ item.useSill === 1?'整单金额':item.useSill === 2?'服务费':'电费' }}
							</view>
							<view v-if="item.usableDayStatus == 3">
								<view style="font-size: 24rpx">
									<text style="margin-right: 10rpx">始</text>
									<text v-if="item.restrictStatus == '1' || item.usableDayStatus == '3'">{{ item.useStartTime }}</text>
									<text v-else>{{ item.fixedStartTime }}</text>
								</view>
								<view style="font-size: 24rpx">
									<text style="margin-right: 10rpx">止</text>
									<text v-if="item.restrictStatus == '1' || item.usableDayStatus == '3'">{{ item.useEndTime }}</text>
									<text v-else>{{ item.fixedEndTime }}</text>
								</view>
							</view>
							<view v-if="item.usableDayStatus == 4">
								<view style="font-size: 24rpx">
								</view>
								<view style="font-size: 24rpx">
									<text style="margin-right: 10rpx" v-for="(witem,windex) in item.limitWeekDate.split(',')"
										:key="windex">每周{{ witem }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ticketList" v-if="popList.equityLists&&popList.equityLists.length != 0">
					<view class="ticketItem" v-if="index<2" v-for="(item, index) in popList.equityLists" :key="index"
						:style="{ backgroundImage: 'url(' + ticket_bg + ')' }">
						<view class="left">
							<view>{{ item.equityStatus === 1?'即时生效':'定时生效' }}</view>
						</view>
						<view class="right">
							<view style="font-size: 34rpx; font-weight: 500">{{ item.equityName }}
							</view>
							<view>
								<view>可用时段：{{item.equityStartTime}}至{{item.equityEndTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view v-if="isLogin" class="btn" @click="toGet">立即领取</view>
					<view v-else class="btn" @click="toLogin">登录后立即领取</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getcouponCentercouponLists,
		couponScan
	} from "@/api/marketing/coupon";
	import upgrading from '@/components/upgrading/upgrading';
	const app = getApp();
	export default {
		components: {
			upgrading,
		},
		data() {
			return {
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				line_bg: `${app.globalData.imgUrl}/group1/image/line_bg8329871651553726326.png`,
				popup_bg: "",
				popup_title: "",
				popup_cancel: "",
				ticket_bg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg.png`,
				couponList: [],
				isNewShow: false,
				popList: [],
				id: '',
				isLogin: false,
				scene: ''
			};
		},
		onLoad(options) {
			if (options.scene) {
				this.scene = options.scene
				this.isNewShow = true
			}
		},

		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			} else {
				this.isLogin = false
				this.toLogin()
			}

			if (this.scene) {
				let scene = decodeURIComponent(decodeURIComponent(this.scene))
				let data = scene.substr(1)
				this.id = data.split("=")[1]
				console.log('二维码参数解析', scene)
				this.isNewShow = true
				this.getPOPlist()
				return
			}
			this.getCouponsCenterList();
		},

		methods: {
			//登录
			toLogin() {
				const msg = !this.isNewShow ? '请先完成登录后才能使用券码兑换' : '请先完成登录后才能领取！'
				app.globalData.CHECK_LOGIN_Model({}, msg);
			},
			
			getCouponsCenterList() {
				getcouponCentercouponLists().then(res => {
					console.log('获取优惠券列表============================》', res)
					if (res.code == 200) {
						if (res && res.data) {
							this.couponList = res.data || [];
						};
						console.log(this.couponList)
					}
				})
			},
			toDetails(row) {
				uni.navigateTo({
					url: `./detail?id=${row.id}`
				});
			},
			toScan() {
				uni.navigateTo({
					url: './scanCode'
				});
			},
			//关闭弹窗
			popClose() {
				this.isNewShow = false
			},
			//立即领取
			toGet() {
				this.isNewShow = false
				uni.navigateTo({
					url: `./detail?id=${this.id}`
				});
			},
			//获取弹窗内容
			getPOPlist() {
				couponScan(this.id).then(res => {
					if (res.code == 200) {
						this.popList = res.data
						console.log('弹窗内容', res)
					}
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.popup-red {
		width: 100%;
		height: 1150rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.img1 {
			width: 70%;
			height: 60rpx;
			margin: 0 auto;
			margin-top: 225rpx;
		}

		.img2 {
			position: absolute;
			top: 80rpx;
			right: 45rpx;
			width: 45rpx;
			height: 45rpx;
		}

	}

	.btn-box {
		position: absolute;
		bottom: 80rpx;
		width: 100%;

		.btn {
			width: 460rpx;
			height: 88rpx;
			background: linear-gradient(181deg, #FFDC31 0%, #F1A909 100%);
			box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(72, 17, 5, 0.302);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #CB3822;
		}
	}

	.ticketList {
		width: 75%;
		margin: 0rpx auto;

		.ticketItem {
			width: 100%;
			height: 210rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background-size: 108% 120%;
			background-repeat: no-repeat;
			background-position: center;
			margin: 20rpx auto;

			.left {
				width: 185rpx;
				height: 210rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					font-size: 34rpx;
					font-weight: 400;
					color: #ffffff;
				}

				>view:nth-of-type(2) {
					margin: 10rpx auto;
					font-size: 30rpx;
					font-weight: 400;
					color: #ffffff;
				}

				>view:nth-of-type(3) {
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 32rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					width: 100%;
					font-size: 34rpx;
					font-weight: 400;
					color: #303133;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin: 20rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #606266;
				}

				>view:nth-of-type(3) {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					font-weight: 400;
					color: #909399;

					>view {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						>view:nth-of-type(1) {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							border: 1rpx solid #909399;
							color: #909399;
							font-size: 20rpx;
							text-align: center;
							line-height: 24rpx;
						}

						>view:nth-of-type(2) {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.couponCenter {
		width: 100%;
		min-height: 100vh;
		background: #F5F7FA;
	}

	.couponsList {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		.couponItem {
			width: 100%;
			height: 246rpx;
			margin: 16rpx auto;
			background: #FFFFFF;
			box-shadow: -4rpx -7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-size: 110% 120%;
			background-repeat: no-repeat;
			background-position: center;

			.couponName {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 40rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					width: 100%;
					font-size: 34rpx;
					font-weight: 400;
					color: #303133;
					overflow: hidden;
					white-space: nowarp;
					text-overflow: ellipsis;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin-top: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}
			}

			.lingqu {
				width: 210rpx;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				>view {
					width: 128rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 244rpx 244rpx 244rpx 244rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #F86141;
				}

			}
		}
	}

	.bottom_button {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.button {
			width: 80%;
			height: 88rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>